<template>
<!-- ref/children 1.绑定到组件上面 ，那么通过this.$refs.refname获取到的是一个组件对象
                    2.普通元素中，那么this.$refs.refname获取到的是一个元素对象-->

  <div class="wrapper" ref="wrapper">
      <div class="content">
          <slot></slot>
      </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'

export default {
    data() {
        return {
            scroll : null
        }
    },
    props:{
        probeType:{
            type: Number,
            default: 0
        },
        pullUpLoad:{
            type:Boolean,
            default: false
        }
    },
    mounted() {
        // 用这个document的方法不太好，可能有很多个重名类
        // document.querySelector('.wrapper')
        // 1.创建BScroll对象
        this.scroll = new BScroll(this.$refs.wrapper,{
            mouseWheel: true,//开启鼠标滚轮
            disableMouse: false,//启用鼠标拖动
            disableTouch: false,//启用手指触摸
            click:true,
            // taps:true,
            probeType:this.probeType,
            pullUpLoad:this.pullUpLoad,
            observeDom:true,
            observeImage:true,
            cancelable:true
        })

        // 2.监听滚动的位置
        if(this.probeType === 2 || this.probeType === 3){
            this.scroll.on('scroll',(position) => {
            this.$emit('scroll',position)
        })

        }

        // 3.监听scroll滚到底部
        // this.scroll.on('pullingUp',()=>{
        //     this.$emit('pullingUp')
        // })
        if(this.pullUpLoad){
            this.scroll.on('pullingUp' , () => {
                this.$emit('pullingUp')
            })
        }
    },
    methods: {
        scrollTo(x,y,time = 500){
            this.scroll && this.scroll.scrollTo && this.scroll.scrollTo(x,y,time)
        },
        finishPullUp(){
            this.scroll && this.scroll.finishPullUp &&  this.scroll.finishPullUp()
        },
        refresh(){
            // console.log(666);
            this.scroll && this.scroll.refresh && this.scroll.refresh()
        },
        getScrollY(){
            return this.scroll ? this.scroll.y : 0
        }
    },
}
</script>

<style scoped>

</style>
